<!-- eslint-disable vue/no-mutating-props -->
<template>
  <card class="add-info-card" title="申请信息">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="商户主体类型" :span="1">{{ orderDetails.typeName }}</a-descriptions-item>
          <!-- 占位符 -->
          <a-descriptions-item label="">{{ ' ' }}</a-descriptions-item>
          <a-descriptions-item label="">{{ ' ' }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="经营信息">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="营业执照" v-if="orderDetails.type === 1 || orderDetails.type === 2">
            <div :class="['view-photo', { 'no-photo': !orderDetails.licenseFileId }]" @click="previewFn(orderDetails.licenseFileId)">
              {{ `${!orderDetails.licenseFileId ? '暂无照片' : '查看照片'}` }}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="营业执照名称" v-if="orderDetails.type === 1 || orderDetails.type === 2">{{
            orderDetails.licenseName
          }}</a-descriptions-item>
          <a-descriptions-item label="注册号" v-if="orderDetails.type === 1 || orderDetails.type === 2">{{
            orderDetails.registerNo
          }}</a-descriptions-item>
          <a-descriptions-item label="商户名称">{{ orderDetails.epName }}</a-descriptions-item>
          <a-descriptions-item label="商户简称">{{ orderDetails.epSimple }}</a-descriptions-item>
          <a-descriptions-item label="注册地址" v-if="orderDetails.type === 1 || orderDetails.type === 2">{{
            orderDetails.registerAddress
          }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="经营范围" v-if="orderDetails.type === 1 || orderDetails.type === 2">{{
            orderDetails.busScope
          }}</a-descriptions-item>
          <a-descriptions-item label="经营省市区">{{
            orderDetails.provinceName + orderDetails.cityName + orderDetails.countyName || '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="经营详细地址">{{ orderDetails.busAddress }}</a-descriptions-item>
          <a-descriptions-item label="门户照片">
            <div
              :class="['view-photo', { 'no-photo': !orderDetails.doorFileId }]"
              @click="previewFn(orderDetails.doorFileId)"
              style="margin-right: 8px"
            >
              {{ `${!orderDetails.doorFileId ? '暂无照片' : '门头照片'}` }}
            </div>
            <div
              :class="['view-photo', { 'no-photo': !orderDetails.storeFileId }]"
              @click="previewFn(orderDetails.storeFileId)"
              style="margin-right: 8px"
            >
              {{ `${!orderDetails.storeFileId ? '暂无照片' : '内部照片'}` }}
            </div>
            <div :class="['view-photo', { 'no-photo': !orderDetails.cashFileId }]" @click="previewFn(orderDetails.cashFileId)">
              {{ `${!orderDetails.cashFileId ? '暂无照片' : '收银台照片'}` }}
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="法人信息">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="证件类型">{{ orderDetails.cardTypeName }}</a-descriptions-item>
          <a-descriptions-item label="法人手机号">{{ orderDetails.legalPhone }}</a-descriptions-item>
          <a-descriptions-item label="证件照片">
            <div
              :class="['view-photo', { 'no-photo': !orderDetails.cardFrontFileId }]"
              @click="previewFn(orderDetails.cardFrontFileId)"
              style="margin-right: 8px"
            >
              {{ `${!orderDetails.cardFrontFileId ? '暂无照片' : '正面照（人像）'}` }}
            </div>
            <div :class="['view-photo', { 'no-photo': !orderDetails.cardBackFileId }]" @click="previewFn(orderDetails.cardBackFileId)">
              {{ `${!orderDetails.cardBackFileId ? '暂无照片' : '反面照（国徽）'}` }}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="证件号码">{{ orderDetails.cardNo }}</a-descriptions-item>
          <a-descriptions-item label="证件人姓名">{{ orderDetails.cardPersonName }}</a-descriptions-item>
          <a-descriptions-item label="证件有效期">{{
            orderDetails.cardStartDate && orderDetails.cardEndTime ? orderDetails.cardStartDate + '至' + orderDetails.cardEndTime : '-'
          }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="结算账户">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="账户类型">{{ orderDetails.accountTypeName }}</a-descriptions-item>
          <a-descriptions-item
            label="对公账号"
            v-if="orderDetails.accountType == 1 && (orderDetails.type === 1 || orderDetails.type === 2)"
            >{{ orderDetails.account }}</a-descriptions-item
          >
          <a-descriptions-item
            label="开户支行"
            v-if="orderDetails.accountType == 1 && (orderDetails.type === 1 || orderDetails.type === 2)"
            >{{ orderDetails.accountSubBranch }}</a-descriptions-item
          >
          <a-descriptions-item
            label="开户名称"
            v-if="orderDetails.accountType == 1 && (orderDetails.type === 1 || orderDetails.type === 2)"
            >{{ orderDetails.apenAccountName }}</a-descriptions-item
          >
          <a-descriptions-item label="银行卡号" v-if="orderDetails.accountType == 2">{{ orderDetails.account }}</a-descriptions-item>
          <a-descriptions-item label="开户姓名" v-if="orderDetails.accountType == 2">{{
            orderDetails.apenAccountName
          }}</a-descriptions-item>
          <a-descriptions-item label="结算主体名称">{{ orderDetails.settleName }}</a-descriptions-item>
          <a-descriptions-item label="结算方式">{{ orderDetails.settleWayName }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>

  <!-- 查看图片 -->
  <a-image-preview-group v-model:visible="previewVisible" v-model:current="previewCurrent" :maskClosable="false" :srcList="previewList" />
</template>

<script setup name="orderDetailsPage">
  import { thirdServicePolymerInfo } from '@/api/finance/thirdPayment'
  import { onMounted, ref } from 'vue'
  const orderDetails = ref({})
  const props = defineProps({
    id: Number,
  })
  const getDetails = () => {
    console.log(props.id)
    thirdServicePolymerInfo({ id: props.id }).then((res) => {
      orderDetails.value = res.result
      console.log(orderDetails.value)
    })
  }

  // 预览
  const previewVisible = ref(false)
  const previewCurrent = ref(0)
  const previewList = ref([])
  const previewFn = (val) => {
    if (val) {
      previewVisible.value = true
      previewList.value = [`${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${val}`]
    }
  }
  onMounted(() => {
    getDetails()
  })
</script>

<style lang="less" scoped>
  .view-photo {
    color: #1890ff;
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
  }
  .no-photo {
    color: #d8d8d8;
    text-decoration: none;
    cursor: unset;
  }
</style>
